<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>兑换商品详情</title> 
<meta name="description" content="安装通（azt365.com）中国大型的b2b电子商务智慧化平台,整合了国内安装行业内采购商与供应商,打通上下游产业链,信息透明共享,通过云平台,大数据,为各大企业供应商提供产品信息、企业推广,为您提供全面的安装行业资讯金融服务以及线上支付.">
<meta name="keywords" content="安装通,azt365,江苏b2b电子商务,江苏建筑采供批发平台,江苏弱电批发,江苏消防报警系统,江苏智慧安装建筑安装,江苏安防监控系统,江苏通风设备安装,江苏通风工程安装,江苏通风工程施工,江苏消防工程材料批发,江苏消防工程材料">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<link href="/res/css/mall/mallIndex.css" rel="stylesheet">  
<link rel="stylesheet" type="text/css" href="/res/css/common/zoom/zzsc.css"> 
<style>
.sdddq { 
	font-size: 20px;
	height: 30px;
	width: 150px; 
} 
#inpT{
	display: inline-block;
    vertical-align: middle;
}
#inpl{
	background-color: #f8f8f8;
}
#inpr{
	background-color: #f8f8f8;
}
#price{
color: #666;
    font-size: 14px;
    font-weight: normal;
}
 .deleted{
			text-decoration: line-through;
        }
 .plus{
            display: inline-block;
            vertical-align: middle;
        }

        .plus div{
            display: inline-block;
        }
        .plus>div{
        width: auto;}
.plus input{
padding-left: 0px;}
</style>
<body class="exchange">
[#assign link="integral" /] [#include "/front/common/front_head.html"]
<div class="w1200 godCar" style="margin-top: 95px;">
<form id="exchangeForm">
	<div> 
		<div class="con-FangDa" id="fangdajing">
		  <div class="con-fangDaIMg">
		  	<!-- 正常显示的图片-->
		  	<img src="[#if (gi.giftInfo.imgUrl!)?index_of(';')>0]${gi.giftInfo.imgUrlArr[0]!}[#else]${gi.giftInfo.imgUrl!}[/#if]">
		    <!-- 滑块-->  
		    <div class="magnifyingBegin"></div>
		    <!-- 放大镜显示的图片 -->
		    <div class="magnifyingShow"><img src="[#if (gi.giftInfo.imgUrl!)?index_of(';')>0]${gi.giftInfo.imgUrlArr[0]!}[#else]${gi.giftInfo.imgUrl!}[/#if]"></div>
		  </div> 
		  
		</div> 
		<div class="godInfo">
			<h3>${gi.giftInfo.giftName!}</h3>
			 
			<div class="detail prefer">
				<div>
                    <label>市场价：</label><strong id="price" class="deleted">￥${gi.giftInfo.giftPrice!}</strong>
                </div>
				<div style="display: inline-block;">
                    <label>所需积分：</label>
                    <strong id="memberPrice">${gi.giftInfo.integralNum!}</strong>&nbsp;&nbsp;积分
                </div>
                
			</div>
			<div class="detail detailTwo">
				 <div>
                    <label>数&nbsp;&nbsp;&nbsp;量：</label>
                    <div class="plus">
                    	<input class="sdddq" id="exchangeAmount" name="exchangeAmount"  style="font-size: 14px; color: #666;" value="1" > </input>
                    </div> 
                    <label style="width: auto;">件&nbsp;&nbsp;(库存<span id="stock" >${gi.giftInfo.stockAmount!}</span>件) 
                    <!-- 	<span style="color: red;margin-left: 20px;">${gi.exchangeSum!}</span>人已兑换 -->
                    </label>
                </div>
			</div>
			<div class="buyBut">
			[#if user??]
				[#if userAccount?? && (userAccount.usIntegral > (gi.giftInfo.integralNum!0))]
				    [#if gi.giftInfo.stockAmount > 0 ]
						<button class="now" type="button"  onclick="exchangeGift();">兑换礼品</button>
					[#else]
						<button class="now disab"  type="button"  >库存不足</button>
					[/#if]
				[#else]
					<button class="now disab"  type="button"  >积分不足</button>
				[/#if] 
			[#else]
				<button id="logbutton"   class="now"  type="button">登录兑换礼品</button>
			[/#if]
				
			</div>
		</div>
		<div class="store fll" style="float: right;">
			<div class="changeRole" style="margin-top: 0px;border: 1px solid #ebebeb;"> 
				 <strong>礼品规则</strong>
				 <ul>
				 	<li>1、实物礼品，小通将在20个工作日内邮寄礼品到您的手中。</li>
				 	<li>2、充值卡礼品，小通将在3个工作日内充值到您填写的手机号。如有疑问，请咨询400-848-1365。</li> 
				 </ul>
			</div>
		</div>
	</div>
	<div class="godCarDetail">
		<div class="store fll"> 
				<div class="iterm2">  
					<div class="detail"> 
						<h4 style="background-color: #f5f5f5;"> 
							<span style="margin-left: 15px;">热门兑换活动</span>
						</h4> 
						<!-- 6个 -->
						<ul class="hot proType">
						[#if hotGifts??]
							[#list hotGifts as hotgift]
							<li>
								<p>
									<a href="/integral/giftDetail/${hotgift.giftInfo.id!}"><img src=[#if (hotgift.giftInfo.imgUrl!)?index_of(';')>0]${hotgift.giftInfo.imgUrlArr[0]!}[#else]${hotgift.giftInfo.imgUrl!}[/#if]></a>
								</p>
								<span>${hotgift.giftInfo.giftName!}</span>
<!-- 								<strong>${hotgift.exchangeSum!}<em>人已兑换</em></strong> -->
							</li>
						   [/#list]
						[/#if]	
						</ul>
					</div>
				</div>
			</div>
			<div class="flr" style="margin-top: 20px;">
				<div class="proTab">
					<button class="tabButt tabButtActive" style="border-right: 1px solid #ebebeb;border-left: none;" type="button">产品详情</button>  
				</div>
				<div style="padding: 15px;">
					${gi.giftInfo.giftDesc!}
				</div>
			</div>
			
	</div>
	<div  id="exchangeDiv" style="display: none;">
	<input name="giftId" type="hidden" value="${gi.giftInfo.id!}">
	<div class="achAdres">
		<ul>
		  [#if gi.giftInfo.giftType=1]
			<li>
				<h4>收货人信息</h4>
				<div class="detail">
					<label>充值手机号码：</label>
					<input type="text" placeholder="请填写您要充值的手机号码" data-rule="required;mobile" name="contactTel"/>
				</div>
				<hr/>
			</li>
			[/#if]
			[#if gi.giftInfo.giftType=2]
			<li>
				<h4>收货人信息</h4>
				<div class="detail">
					<label>收货人：</label>
					<input type="text" data-rule="required;" placeholder="请填写收货人" name="contactName" maxlength="45"/>
				</div>
				<div class="detail">
						<label>详细地址：</label>
						<input class="backinput" type="text" data-rule="required;"  placeholder="详细地址"  name="contactAdd" maxlength="150"/>
				</div>
				<div class="detail">
					<label>手机号码：</label>
					<input type="text" placeholder="请填写常用手机号码" data-rule="required;mobile"  name="contactTel" maxlength="15"/>
				</div>
				<hr/>
			</li>
			[/#if]
			<li>
				<h4>确认订单信息</h4>
				<table>
					<thead>
						<tr>
							<th style="padding-left: 10px;">礼品详情</th>
							<th>${gi.giftInfo.giftName!}</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>
								<img alt="" src="[#if (gi.giftInfo.imgUrl!)?index_of(';')>0]${gi.giftInfo.imgUrlArr[0]!}[#else]${gi.giftInfo.imgUrl!}[/#if]"/>
								<div class="detailDialog">
									<a>${gi.giftInfo.giftName!}</a>
									<div>
										<label>兑换数量：</label>
										<span id="numGod"></span>
									</div> 
								</div>  
							</td>
							<td>
								<h4>${gi.giftInfo.integralNum!}积分</h4>
								<dfn>提示：兑换礼品后您将减少<span class="num">${gi.giftInfo.integralNum!}</span>积分，一旦兑换成功，积分将不退还！请确定喜欢此礼品再兑换</dfn>
							</td>
						</tr>
					</tbody>
				</table>
				<hr/>
				<div style="text-align: center;">
					<button type="button" class="confir" id="exchangebutton" >确认提交</button>
					<button type="button" style="margin-left: 15px;" class="cancel">取消</button>
				</div>
			</li>
		</ul>
	</div>
</div>
</form>
</div>  
[#include "/front/common/front_foot.html"] 
</body>
<script src="/res/js/common/jquery.1.9.1.min.js"></script>  
<script src="/res/js/common/jquery.ellipsis.js"></script>
<script src="/res/js/common/newAddress.js"></script>
<script type="text/javascript" class="library" src="/res/js/common/zoom/jquery.colorbox-min.js"></script>
<script type="text/javascript" class="library" src="/res/js/common/zoom/zzsc.js"></script>
<script src="/res/js/common/jQuery.numBox.js"></script>
<script type="text/javascript" src="/res/third/layer/layer.js"></script>
<script type="text/javascript" src="/res/third/laytpl/laytpl.js"></script>
<script type="text/javascript" src="/res/third/laypage/laypage.js"></script>
<script src="/res/third/nice-validator/jquery.validator.js?local=zh-CN"></script>
<script type="text/javascript">
	$(function(){
		 new newAddress('reg' , 'select' , 1 ,  1 , 3  ,1);
		 $(".store.fll .intro span").ellipsis({maxWidth:220,maxLine:2});
	     bref=$(".store.fll span.intro span[data-info]").html(); 
		$(".godCar .godInfo .detail.prefer>div.ask .askOuter>img").hover(function(){
			$(this).siblings("div").show();
		});
		$(".godCar .godInfo .detail.prefer>div.ask .askOuter>div").mouseleave(function(){
			$(this).hide();
		});
		 $("#exchangeAmount").inputBox({
			 max:${gi.giftInfo.stockAmount!}
		 });
		 
		$(".godCar .godInfo .detailTwo dfn").click(function(){
			$(this).siblings("dfn").removeClass("act");
			$(this).addClass("act");
		});
		
		  //登陆
		   $("#logbutton").click(function(){
				$.ajax({
					   type: "POST",
					   dataType:"json",
					   url: "/integral/islog",
					   success: function(data){
						   if(data.success){
							   location.reload();
						   }
					   }
				});
		   });
	});

	   
	 function loginDialog() {
	        var diag = new Dialog();
	        diag.Title = "请登录";
	        diag.Width = 360;
	        diag.Height = 200;
	        diag.InnerHtml =
	                '<form id="signin-form" onsubmit="return false;">' +
	                '<div class="form-box" style="padding-top:30px;">' +
	                '<ul>' +
	                '<li style="margin: 15px 0 15px 0;">' +
	                '<label style="width:80px;font-size:13px;margin-right: 5px;">手机/邮箱:</label>' +
	                '<div class="form-file"><input type="text" class="allInput" name="username" id="username" style="height: 28px;line-height: 28px;"/></div>' +
	                '</li>' +
	                '<li style="margin: 15px 0 15px 0;">' +
	                '<label style="width:80px;font-size:13px;margin-right: 5px;">登录密码:</label>' +
	                '<div class="form-file"><input type="password" class="allInput" name="password" id="password" style="height: 28px;line-height: 28px;" /></div>' +
	                '</li>' +
	                '</ul>' +
	                '</div>' +
	                '</form>';
	        diag.OKEvent = function () {
	            var username = $('#username').val();
	            var password = $('#password').val();
	            if (username == '') {
	                alert("请输入用户名");
	                return;
	            }
	            if (password == '') {
	                alert("请输入密码");
	                return;
	            }
	            var form = $('#signin-form');

	            var data = form.serializeObject();
	            data.password = $.md5(data.password);

	            App.api('/user/dosignin', data).then(function (url) {
	                location.reload();
	            });
	        };//点击确定后调用的方法
	        diag.show();
	    }
	 /*兑换商品**/
	 function exchangeGift() {
		 	$("#numGod").text($("#exchangeAmount").val());
		 	$(".achAdres li table dfn span.num").text(parseFloat($("#memberPrice").text()*parseFloat($("#exchangeAmount").val())));
	        layer.open({
	            title:"兑换商品",
	            type:1,
	            maxWidth:800,
	            btn:false,
	            content: $('#exchangeDiv')
	        });
	    }
	 $('#exchangeForm').validator({
			theme: 'yellow_right_effect',
			stopOnError:true,
			timely: 2,
			msgClass : "n-right"
		});
	   
	/*兑换商品确认提交**/
	$("#exchangebutton").click(function(){
		$("#exchangeForm").isValid(function() {
		 var data=$("#exchangeForm").serialize();
				$.ajax({
					   type: "POST",
					   dataType:"json",
					   data:data,
					   url: "/integral/exchangeIntegral",
					   success: function(data){
						       layer.msg(data.msg, {time:2000} , function(){
							   layer.closeAll();
							   location.reload();
						   });
					   }
				   });
		   });
	});
	$(".cancel").click(function(){
		 layer.closeAll();
	});

</script>
</html>